<template>
  <header-bar></header-bar>
  <div class="gray-row">
    <div class="text">核审</div>
  </div>
  <div>
    <el-dialog v-model="dialogVisualFlag" @close="closeDialog" :lock-scroll="false">
      <el-row style="margin-bottom: 5px" type="flex" justify="center" align="middle">
        <el-button @click="passPicFromID" type="success">通过</el-button>
        <el-button @click="deletePicFromID" type="danger">删除</el-button>
      </el-row>
    </el-dialog>
    <div class="demo-image__lazy image-top">
      <div v-for="(info, index)  in imgInfoReturn" class="img" :key="index">
        <el-image :key="info.id" :src="info.url" @click="clickImgHandler(info.id, info.imageName, index)"
          lazy></el-image>
      </div>
    </div>
    <el-divider v-if="showDivider">没有更多图图了，还不快去画？</el-divider>
    <el-backtop target=".image-top" :visibility-height="400"></el-backtop>
  </div>
</template>

<script setup>
import { getWaitedReviewPics, deletePicByID, passPicByID } from '../api/check'
import { onBeforeMount, ref } from 'vue'
import { ElMessage } from 'element-plus'
import HeaderBar from '@/components/HeaderBar.vue'

const showDivider = ref(false)
const dialogVisualFlag = ref(false)
const selectImgID = ref(0)
const selectImgIndex = ref(-1)
const selectImgName = ref('')
const imgInfoReturn = ref(null)
onBeforeMount(() => {
  getWaitedReviewPics().then((res) => {
    console.log(res.data)
    imgInfoReturn.value = res.data.pics
  })
  setTimeout(() => {
    showDivider.value = true
  }, 1000)
})
const clickImgHandler = (id, imageName, index) => {
  dialogVisualFlag.value = true
  selectImgID.value = id
  selectImgIndex.value = index
  selectImgName.value = imageName
}
const passPicFromID = () => {
  passPicByID(selectImgID.value, selectImgName.value).then((res) => {
    console.log(res.data)
    ElMessage({
      message: '感谢你的帮助！',
      type: 'success'
    })
    imgInfoReturn.value[selectImgIndex.value].url = ''
    closeDialog()
    dialogVisualFlag.value = false
  })
}
const deletePicFromID = () => {
  deletePicByID(selectImgID.value).then((res) => {
    console.log(res.data)
    ElMessage({
      message: '感谢你的帮助！',
      type: 'success'
    })
    imgInfoReturn.value[selectImgIndex.value].url = ''
    closeDialog()
    dialogVisualFlag.value = false
  })
}
const closeDialog = () => {
  selectImgID.value = 0
  selectImgName.value = ''
  selectImgIndex.value = -1
}
</script>

<style scoped lang="less">
.gray-row {
  background-color: #f5f5f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  .text {
    font-weight: 700;
  }
}

.demo-image__lazy {
  /*水平居中*/
  margin: 0 auto;
  display: flex;
  /*align-content: center;*/
  /*justify-content: space-between;*/
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 1100px;
  /*overflow-y: auto;*/
}

.demo-image__lazy .img {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 5px;
  width: 256px;
  height: auto;
}

/*.demo-image__lazy::after {*/
/*    content: '';*/
/*    flex: auto;    !* 或者flex: 1 *!*/
/*}*/

@media screen and (max-width: 1100px) {
  .demo-image__lazy {
    width: 800px;
  }
}

@media screen and (max-width: 800px) {
  .demo-image__lazy {
    width: 600px;
  }
}

@media screen and (max-width: 600px) {
  .demo-image__lazy {
    width: 100%;
  }

  .demo-image__lazy .img {
    width: 90vw;
  }
}
</style>
